<template>
    <div class="box">
        <!-- 导航栏 -->
        <navBar title="首页"></navBar>
        <!-- 搜索框 -->
        <van-search v-model="search" placeholder="请输入搜索关键词" @update:model-value="onSearch" />
        <!-- 导航菜单 -->
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="(v, i) in icon" :key="i" @click="router.push('/list')">
                <van-image :src="v.image_src" />
            </van-grid-item>
        </van-grid>
        <!-- 轮播图 -->
        <!-- <swiper :images="images"></swiper> -->
        <!-- 商品列表 -->
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list v-model:loading="loading1" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-grid :border="false" :column-num="2">
                    <van-grid-item v-for="(v, i) in list" :key="i" @click="toDetail(v.goods_id)">
                        <van-image
                            :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
                        <div class="jieShao">{{ v.goods_name }}</div>
                        <div style="color: red;font-size: 20px; font-weight: bold;">${{ v.goods_price }}</div>
                    </van-grid-item>
                </van-grid>
            </van-list>
        </van-pull-refresh>

        <div style="height: 3.5rem;"></div>
    </div>
</template>

<script setup>
import navBar from '@/components/navBar.vue';
import swiper from '@/components/swiper.vue';

import { catitemsApi, searchApi, swiperdataApi } from '@/api/api';

import { ref } from "vue"

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

let search = ref('')

let icon = ref({})

// 导航菜单的渲染
const iconList = () => {
    catitemsApi().then((res) => {
        console.log(res)
        icon.value = res.data.message
    })
}
iconList()


// 列表的渲染
let list = ref({})
let total = ref(0)
let pagenum = ref(1)


const searchList = () => {
    searchApi(search.value, pagenum.value).then((res) => {
        console.log(res)
        list.value = res.data.message.goods
        total.value = res.data.message.total
    })
}
searchList()

import _ from "lodash"

const onSearch = _.debounce((val) => {
    console.log(val)
    searchList()
}, 1000)

// 接收分类传过来的参数
let name = ref(route.query.name)
// console.log(name.value)
search.value = name.value

if (search.value) {
    searchList()
}

// 跳转到详情
const toDetail = (id) => {
    // console.log(id)
    router.push({ path: '/detail', query: { id: id } })
}

let images = ref([])

const swiperList = () => {
    swiperdataApi().then((res) => {
        console.log(res)
        images.value = res.data.message
    })
}
swiperList()

// 下拉刷新
import { showToast } from 'vant';

const loading = ref(false);
const onRefresh = () => {
    // search.value = []
    pagenum.value = 1
    searchList()
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;

        loading1.value = false
        finished.value = false
    }, 1000);
};

const loading1 = ref(false);
const finished = ref(false);

const onLoad = () => {
    if (Math.ceil(total.value / 20) > pagenum.value) {
        pagenum.value++
        searchList()
    } else {
        loading.value = false;
        finished.value = true;
    }
};

</script>

<style lang="scss" scoped>
.jieShao {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>